<!-- 到期设备 -->
<template>
  <el-card shadow="never" class="table-container">
    <div class="app-container">
      <div class="titleMolde">设备升级
      </div>
      <div class="Filters">
        <el-input v-model="queryParams2.deviceCode" style="width: 200px" placeholder="设备IMEI号" />
        <el-button type="primary" class="mrg-lf-10" @click="handleQuery2">查询</el-button>

      </div>
      <el-table v-loading="loading" :data="pageData2">
        <el-table-column label="序号" align="center" type="index" width="60" />
        <el-table-column label="模块名称" align="center" prop="module" />
        <el-table-column label="设备IMEI号" align="center" prop="deviceCode" />
        <el-table-column label="设备编号（BT码）" align="center" prop="btcode" />
        <el-table-column label="硬件版本" align="center" prop="hardVer" />
        <el-table-column label="软件版本" align="center" prop="softVer" />
        <el-table-column label="ICCID卡号" align="center" prop="iccid" />
        <el-table-column label="操作" align="center" fixed="right" width="220">
          <template #default="scope">
            <el-button title="设备升级版本" type="primary" circle @click.prevent="manageVersions(scope.row)">
              <el-icon>
                <UploadFilled />
              </el-icon>
            </el-button>
            <el-button title="取消升级版本" type="danger" icon="delete" circle @click.prevent="deleteRow(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <pagination @pagination="handleQuery2" v-if="queryParams2.pages.total > 0"
        v-model:total="queryParams2.pages.total" v-model:page="queryParams2.pages.current"
        v-model:limit="queryParams2.pages.size" />
    </div>
  </el-card>

  <el-dialog destroy-on-close @close="handleClose" v-model="outerVisible" :title="outer.title">
    <div class="Filters">
      <el-input v-model="queryParams.upgradeName" style="width: 200px" placeholder="名称" />
      <el-button type="primary" class="mrg-lf-10" @click="handleQuery">查询</el-button>

    </div>
    <el-table v-loading="loading" :data="pageData" highlight-current-row @current-change="handleCurrentChange">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="版本名称" align="center" prop="upgradeName" />
      <el-table-column label="软件版本" align="center" prop="softVer" />
      <el-table-column label="模块名称" align="center" prop="module" />
      <el-table-column label="厂商名称" align="center" prop="manufacturer" />
      <el-table-column label="描述" align="center" prop="remark" />
    </el-table>
    <pagination @pagination="handleQuery" v-if="queryParams.pages.total > 0" v-model:total="queryParams.pages.total"
      v-model:page="queryParams.pages.current" v-model:limit="queryParams.pages.size" />

    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="outerVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogFormInnerVisible = true">确定</el-button>
      </div>
    </template>
    <el-dialog width="30%" title="确认是否立即升级" v-model="dialogFormInnerVisible" append-to-body>
      <el-form :inline="true" class="demo-form-inline">
        <!-- <el-form-item>
          <el-radio v-model="isSocketType" label="INTERNAL" style="color: #ededed">内部版本</el-radio>
          <el-radio v-model="isSocketType" label="EXTERNAL" style="color: #ededed">延后升级</el-radio>
        </el-form-item> -->
        <el-form-item>
          <el-radio v-model="isSocket" label="NOW" style="color: #ededed">立即升级</el-radio>
          <el-radio v-model="isSocket" label="AWAIT" style="color: #ededed">延后升级</el-radio>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormInnerVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSetSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </el-dialog>


</template>

<script setup lang="ts">
defineOptions({
  name: "upgrade",
  inheritAttrs: false,
});

import UpgradeAPI, { UpgradePageQuery } from "@/api/upgrade";
import DeviceApi, { upgradePageVO } from "@/api/device";

let outerVisible = ref(false);
let dialogFormInnerVisible = ref(false)
let isSocket = ref('NOW')
let isSocketType = ref('INTERNAL')
let outer = ref({
  title: '新增设备规格',
  deviceId: '',
  packid: ''
});
const loading = ref(false);
/**
@date: 2024-12-15 17:50:58
分页数据
*/
let pageData = ref()
let pageData2 = ref()
/** 用户查询参数  */
let queryParams = reactive<UpgradePageQuery>({
  "pages": {
    "current": 1,
    "size": 10,
    "startTime": "",
    "endTime": "",
    "orders": [
      {
        "column": "",
        "asc": true
      }
    ]
  },
  "upgradeName": undefined,
  "customerId": undefined,
});
let queryParams2 = reactive<upgradePageVO>({
  "pages": {
    "current": 1,
    "size": 10,
    "startTime": "",
    "endTime": "",
    "orders": [
      {
        "column": "",
        "asc": true
      }
    ]
  },
  "deviceCode": undefined
});

/** 版本管理查询 */
function handleQuery2() {
  loading.value = true;
  DeviceApi.upgradePage(queryParams2)
    .then((data) => {
      console.log(data);

      pageData2.value = data.records;
      queryParams2.pages.total = data.total;
      queryParams2.pages.current = data.current;
    })
    .finally(() => {
      loading.value = false;
    });
}
/** 版本管理查询 */
function handleQuery() {
  loading.value = true;
  UpgradeAPI.page(queryParams)
    .then((data) => {
      pageData.value = data.records;
      queryParams.pages.total = data.total;
      queryParams.pages.current = data.current;
    })
    .finally(() => {
      loading.value = false;
    });
}

function manageVersions(item: any) {
  outerVisible.value = true
  outer.value.title = item.deviceName + '升级版本'
  outer.value.deviceId = item.deviceId
  handleQuery();
}


function deleteRow(data: any) {
  console.log(data);

  UpgradeAPI.deviceCancelSave(data.deviceCode)
    .then((data) => {
      handleQuery();
      ElMessage.success('取消升级成功');
    })
    .finally(() => {
    });
}

function handleClose() {
  outer.value.deviceId = ''

}
/**
@date: 2024-12-15 17:42:57
表格单选
*/
function handleCurrentChange(item: any) {
  console.log(item);
  outer.value.packid = item.id
}
function onSetSubmit() {
  let data = {
    deviceId: outer.value.deviceId,
    upgradePackId: outer.value.packid,
    type: isSocketType.value,
    time: isSocket.value
  }
  console.log(data);
  UpgradeAPI.downloadOTA(data)
    .then((data) => {
      handleQuery();
      ElMessage.success('下发升级成功');

    })
    .finally(() => {
      outerVisible.value = false
      dialogFormInnerVisible.value = false
    });
}

onMounted(() => {
  handleQuery2();
});
</script>
<style lang="scss" scoped>
.mrg-lf-10 {
  margin-left: 10px;
}

.fontColor_333 {
  :deep(.el-input__inner) {
    color: #333;
  }
}

.titleMolde {
  font-weight: bold;
  position: relative;
  display: flex;
  padding-left: 15px;
  justify-content: space-between;
  align-items: center;

  &::after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    left: 4px;
    top: 6px;
    background: #2cdfe5b5;
  }

  &::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #09e0e7;
    position: absolute;
    left: 0;
    top: 2px;
  }

}

.app-container {
  position: relative;
  padding: 10px;

  .allTabContent {
    display: flex;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 0;

    div {
      margin-left: 26px;
      font-weight: 700;

      span {
        margin-left: 8px;
      }
    }
  }
}

.Filters {
  margin: 10px 0;
  display: flex;
  align-items: center;

  .el-segmented {
    --el-segmented-item-selected-color: var(--el-text-color-primary);
    --el-segmented-item-selected-bg-color: #5cadff;
    --el-border-radius-base: 16px;
  }

  &>div {
    margin-right: 5px;
  }
}

.div-container {
  display: flex;
  width: 100%;
  color: #333;

  .div-left-container {
    width: 420px;

    .div_search {}
  }

  .div-right-container {
    width: calc(100% - 420px - 10px);
    margin-left: 10px;
    position: relative;

    #myPageTop {
      position: absolute;
      top: 60px;
      left: 10px;
      z-index: 6;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;

      #tipinput {
        background-color: #fff;
        color: #333;
        border: 1px solid #ccc;
        padding: 5px;
      }
    }
  }

  :deep(.form-container) {
    .el-form-item__label {
      color: #333;
    }

    .el-input__inner {
      color: #333;
    }

    .el-textarea__inner {
      color: #333;

    }
  }
}
</style>
<style>
.amap-sug-result {
  z-index: 9999 !important;
  color: #333
}
</style>
